<template>
	<view class="exercise-container">
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="right-buttons">
				<view class="custom-btn" @tap="toggleCustomRules">
					<text class="icon">⚙️</text>
				</view>
				<view class="help-btn" @tap="showHelp">
					<text class="icon">?</text>
				</view>
			</view>
		</view>

		<!-- 性别选择按钮 -->
		<view class="gender-selector">
			<view class="gender-btn" :class="{ active: voiceGender === 'male' }" @tap="setVoiceGender('male')">
				<text>男声</text>
			</view>
			<view class="gender-btn" :class="{ active: voiceGender === 'female' }" @tap="setVoiceGender('female')">
				<text>女声</text>
			</view>
		</view>

		<!-- 锻炼时间和次数显示 -->
		<view class="exercise-info">
			<text class="time">{{formatTime(timeLeft)}}</text>
			<text class="count">{{currentCount}}次</text>
		</view>

		<!-- 主要锻炼区域 -->
		<view class="exercise-area">
			<view class="animation-wrapper" :class="{ 'is-contracting': exerciseStatus === '收紧' }">
				<!-- 外圈动画 -->
				<view class="outer-ring">
					<view class="ring-wave" v-for="i in 3" :key="i"></view>
				</view>
				<!-- 中心动画区域 -->
				<view class="core-animation">
					<view class="muscle-core" :class="{ 'contract': exerciseStatus === '收紧' }">
						<view class="inner-circle">
							<text class="status-text">{{exerciseStatus}}</text>
							<text class="count-text">{{currentCount}}</text>
							<text class="time-text">{{formatTime(timeLeft)}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 底部控制栏 -->
		<view class="control-bar">
			<!-- 添加进度条到底部白色区域 -->
			<view class="progress-section">
				<view class="progress-info">
					<text class="progress-label">总进度: {{Math.floor((1 - timeLeft/totalTime) * 100)}}%</text>
				</view>
				<view class="progress-bar">
					<view class="progress-inner" :style="{ width: `${(1 - timeLeft/totalTime) * 100}%` }"></view>
				</view>
				<view class="interval-status">
					<text>当前阶段: {{exerciseStatus}} ({{currentIntervalTime}}秒)</text>
				</view>
			</view>
			
			<view class="current-action">
				<text>当前动作: {{currentExercise.name}}</text>
				<text>下一动作: {{nextExercise.name}}</text>
			</view>
			
			<view class="controls">
				<view class="control-btn" @tap="toggleSound">
					<image class="control-icon" :src="sound ? '/static/images/sound-on.png' : '/static/images/sound-off.png'"></image>
				</view>
				<view class="play-btn" @tap="toggleExercise">
					<image class="control-icon" :src="isPlaying ? '/static/images/pause.png' : '/static/images/play.png'"></image>
				</view>
				<view class="control-btn" @tap="toggleVibrate">
					<image class="control-icon" :src="vibrate ? '/static/images/vibrate-on.png' : '/static/images/vibrate-off.png'"></image>
				</view>
			</view>
		</view>

		<!-- 帮助弹窗 -->
		<view class="help-modal" v-if="showHelpModal" @tap="hideHelp">
			<view class="modal-content" @tap.stop>
				<view class="modal-title">锻炼指导</view>
				<view class="modal-body">
					<text>1. 找到PC肌的位置:尝试在排尿时中断尿流,能够感受到的肌肉就是PC肌</text>
					<text>2. 基础收缩练习:收缩PC肌5秒,放松5秒</text>
					<text>3. 快速收缩练习:快速收缩放松PC肌</text>
					<text>4. 建议每天练习3-4次,每次10-15分钟</text>
				</view>
				<view class="modal-footer">
					<button @tap="hideHelp">知道了</button>
				</view>
			</view>
		</view>

		<!-- 添加自定义规则面板 -->
		<view class="custom-rules-panel" v-if="showCustomRules">
			<view class="panel-content">
				<view class="panel-title">自定义训练规则</view>
				
				<view class="rule-item">
					<text class="rule-label">训练时长 (分钟)</text>
					<slider class="rule-slider" min="1" max="30" :value="customRules.totalTime / 60" show-value @change="onTotalTimeChange" />
				</view>
				
				<view class="rule-item">
					<text class="rule-label">收紧时长 (秒)</text>
					<slider class="rule-slider" min="2" max="20" :value="customRules.contractTime" show-value @change="onContractTimeChange" />
				</view>
				
				<view class="rule-item">
					<text class="rule-label">放松时长 (秒)</text>
					<slider class="rule-slider" min="2" max="20" :value="customRules.relaxTime" show-value @change="onRelaxTimeChange" />
				</view>
				
				<view class="rule-item">
					<text class="rule-label">休息间隔 (次数)</text>
					<slider class="rule-slider" min="5" max="30" :value="customRules.restInterval" show-value @change="onRestIntervalChange" />
				</view>
				
				<view class="rule-item">
					<text class="rule-label">休息时长 (秒)</text>
					<slider class="rule-slider" min="10" max="60" :value="customRules.restTime" show-value @change="onRestTimeChange" />
				</view>
				
				<view class="panel-buttons">
					<button class="btn-reset" @tap="resetCustomRules">重置</button>
					<button class="btn-apply" @tap="applyCustomRules">应用</button>
				</view>
			</view>
		</view>

		<!-- 添加休息倒计时弹窗 -->
		<view class="rest-modal" v-if="isResting">
			<view class="modal-content">
				<view class="rest-timer">
					<text class="rest-time">{{restTimeLeft}}</text>
					<text class="rest-unit">秒</text>
				</view>
				<view class="rest-message">
					<text>已完成 {{currentCount}} 次训练</text>
					<text>休息一下，放松肌肉</text>
				</view>
				<view class="modal-footer">
					<button @tap="skipRest">跳过休息</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let vk = uni.vk;
	export default {
		data() {
			// 页面数据变量
			return {
				// init请求返回的数据
				data:{
					
				},
				// 表单请求数据
				form1:{
					
				},
				scrollTop:0,
				isPlaying: false,
				sound: true,
				vibrate: true,
				showHelpModal: false,
				timeLeft: 300, // 5分钟倒计时
				currentCount: 0,
				scale: 1,
				exerciseStatus: '收紧',
				currentExercise: {
					name: '初练者硬度提升'
				},
				nextExercise: {
					name: '休息'
				},
				totalTime: 300, // Assuming totalTime is 5 minutes
				voiceGender: 'male',
				currentInterval: 0,
				intervalDuration: 2, // 每个间隔5秒
				intervalDots: 10, // 显示10个间隔点
				contractSound: null,
				relaxSound: null,
				// 新增数据
				showFloatWindow: false,
				showCustomRules: false,
				customRules: {
					totalTime: 300, // 5分钟
					contractTime: 5, // 5秒收紧
					relaxTime: 5, // 5秒放松
					restInterval: 10, // 每10次休息一次
					restTime: 15 // 休息15秒
				},
				// 添加休息相关数据
				isResting: false,
				restTimeLeft: 0,
				restTimer: null,
				currentIntervalTime: 5, // 当前间隔剩余时间
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		// 监听 - 页面每次【加载时】执行(如：前进)
		onLoad(options = {}) {
			vk = uni.vk;
			this.options = options;
			this.init(options);
			// 初始化音效
			this.initSounds();
		},
		// 监听 - 页面【首次渲染完成时】执行。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady(){
			
		},
		// 监听 - 页面每次【显示时】执行(如：前进和返回) (页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面)
		onShow() {
			
		},
		// 监听 - 页面每次【隐藏时】执行(如：返回)
		onHide() {
			
		},
		// 监听 - 点击右上角转发时
		onShareAppMessage(options) {
			
		},
		// 函数
		methods: {
			// 页面数据初始化函数
			init(options){
				//vk.reLaunch("/pages_template/uni-id/index/index");
			},
			pageTo(path){
				vk.navigateTo(path);
			},
			goBack() {
				uni.navigateBack()
			},
			showHelp() {
				this.showHelpModal = true
			},
			hideHelp() {
				this.showHelpModal = false
			},
			toggleSound() {
				this.sound = !this.sound
			},
			toggleVibrate() {
				this.vibrate = !this.vibrate
			},
			toggleExercise() {
				this.isPlaying = !this.isPlaying
				if(this.isPlaying) {
					this.startExercise()
				} else {
					this.pauseExercise()
				}
			},
			setVoiceGender(gender) {
				this.voiceGender = gender;
				this.initSounds();
			},
			toggleFloatWindow() {
				this.showFloatWindow = !this.showFloatWindow;
				// 这里可以添加悬浮窗逻辑
				uni.showToast({
					title: '悬浮窗功能开发中',
					icon: 'none'
				});
			},
			startExercise() {
				if (this.timer) clearInterval(this.timer);
				
				this.isPlaying = true;
				
				// 设置初始状态
				this.exerciseStatus = '收紧';
				this.currentInterval = 0;
				
				// 设置当前间隔时长
				this.currentIntervalTime = this.customRules.contractTime;
				
				// 播放开始音效
				if (this.sound) {
					const audio = this.contractSound;
					if (audio) audio.play();
				}
				
				this.timer = setInterval(() => {
					if (this.timeLeft > 0) {
						this.timeLeft--;
						
						// 更新当前间隔时间
						if (this.currentIntervalTime > 0) {
							this.currentIntervalTime--;
						}
						
						// 当前间隔结束时切换状态
						if (this.currentIntervalTime === 0) {
							this.switchExerciseStatus();
						}
					} else {
						this.finishExercise();
					}
				}, 1000);
			},
			pauseExercise() {
				clearInterval(this.timer)
			},
			finishExercise() {
				clearInterval(this.timer)
				this.isPlaying = false
				uni.showToast({
					title: '锻炼完成!',
					icon: 'success'
				})
			},
			switchExerciseStatus() {
				// 切换状态并重置间隔时间
				if (this.exerciseStatus === '收紧') {
					this.exerciseStatus = '放松';
					this.currentIntervalTime = this.customRules.relaxTime;
				} else {
					this.exerciseStatus = '收紧';
					this.currentIntervalTime = this.customRules.contractTime;
					this.currentCount++;
					
					// 检查是否需要休息
					if (this.currentCount > 0 && this.currentCount % this.customRules.restInterval === 0) {
						this.startRest();
						return;
					}
				}
				
				// 播放音效和震动
				if (this.sound) {
					const audio = this.exerciseStatus === '收紧' ? this.contractSound : this.relaxSound;
					if (audio) audio.play();
				}
				
				if (this.vibrate && this.exerciseStatus === '收紧') {
					uni.vibrateShort();
				}
			},
			initSounds() {
				// 释放旧的音频上下文
				if (this.contractSound) {
					this.contractSound.destroy();
				}
				if (this.relaxSound) {
					this.relaxSound.destroy();
				}
				
				// 创建新的音频上下文
				this.contractSound = uni.createInnerAudioContext()
				this.relaxSound = uni.createInnerAudioContext()
				
				const prefix = this.voiceGender === 'male' ? 'male' : 'female'
				this.contractSound.src = `/static/audio/${prefix}-contract.mp3`
				this.relaxSound.src = `/static/audio/${prefix}-relax.mp3`
			},
			formatTime(seconds) {
				const minutes = Math.floor(seconds / 60)
				const remainingSeconds = seconds % 60
				return `${String(minutes).padStart(2, '0')}分${String(remainingSeconds).padStart(2, '0')}秒`
			},
			toggleCustomRules() {
				this.showCustomRules = !this.showCustomRules;
				if (this.showCustomRules && this.isPlaying) {
					this.pauseExercise();
				}
			},
			resetCustomRules() {
				this.customRules = {
					totalTime: 300, // 5分钟
					contractTime: 5, // 5秒收紧
					relaxTime: 5, // 5秒放松
					restInterval: 10, // 每10次休息一次
					restTime: 15 // 休息15秒
				};
				
				// 立即应用重置后的规则
				this.applyCustomRules();
			},
			applyCustomRules() {
				// 更新训练相关时间
				this.totalTime = this.customRules.totalTime;
				this.timeLeft = this.customRules.totalTime;
				
				// 重置计数和状态
				this.currentCount = 0;
				this.currentInterval = 0;
				this.exerciseStatus = '收紧';
				this.currentIntervalTime = this.customRules.contractTime;
				
				// 如果正在训练，需要重新开始
				const wasPlaying = this.isPlaying;
				if (wasPlaying) {
					this.pauseExercise();
				}
				
				this.showCustomRules = false;
				
				// 如果之前在训练，应用规则后自动继续
				if (wasPlaying) {
					this.startExercise();
				}
				
				uni.showToast({
					title: '规则已应用',
					icon: 'success'
				});
			},
			onTotalTimeChange(e) {
				this.customRules.totalTime = e.detail.value * 60;
			},
			onContractTimeChange(e) {
				this.customRules.contractTime = parseInt(e.detail.value);
				// 更新总间隔时长
				this.intervalDuration = this.customRules.contractTime + this.customRules.relaxTime;
			},
			onRelaxTimeChange(e) {
				this.customRules.relaxTime = parseInt(e.detail.value);
				// 更新总间隔时长
				this.intervalDuration = this.customRules.contractTime + this.customRules.relaxTime;
			},
			onRestIntervalChange(e) {
				this.customRules.restInterval = e.detail.value;
			},
			onRestTimeChange(e) {
				this.customRules.restTime = e.detail.value;
			},
			// 开始休息
			startRest() {
				// 暂停训练
				this.pauseExercise()
				this.isPlaying = false
				
				// 显示休息框
				this.isResting = true
				this.restTimeLeft = this.customRules.restTime
				
				// 开始休息倒计时
				this.restTimer = setInterval(() => {
					if (this.restTimeLeft > 0) {
						this.restTimeLeft--
					} else {
						this.endRest()
					}
				}, 1000)
			},
			// 结束休息
			endRest() {
				// 清除休息计时器
				if (this.restTimer) {
					clearInterval(this.restTimer)
					this.restTimer = null
				}
				
				// 隐藏休息框
				this.isResting = false
				
				// 自动继续训练
				this.startExercise()
			},
			// 跳过休息
			skipRest() {
				this.endRest()
			}
		},
		// 监听器
		watch:{
			
		},
		// 计算属性
		computed:{
			
		},
		// 组件销毁时清理资源
		beforeDestroy() {
			if (this.timer) clearInterval(this.timer)
			if (this.restTimer) clearInterval(this.restTimer)
			if (this.contractSound) this.contractSound.destroy()
			if (this.relaxSound) this.relaxSound.destroy()
		}
	}
</script>
<style lang="scss" scoped>
	.exercise-container {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 20px;
		
		.nav-bar {
			position: fixed;
			top: 20px;
			right: 20px;
			z-index: 100;
			
			.right-buttons {
				display: flex;
				flex-direction: column;
				gap: 10px;
				
				.custom-btn, .help-btn {
					width: 40px;
					height: 40px;
					border-radius: 20px;
					background: rgba(255, 255, 255, 0.9);
					box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
					display: flex;
					align-items: center;
					justify-content: center;
					backdrop-filter: blur(5px);
					
					.icon {
						font-size: 20px;
					}
					
					&:active {
						transform: scale(0.95);
					}
				}
			}
		}

		.gender-selector {
			display: flex;
			justify-content: center;
			margin-bottom: 20px;
			
			.gender-btn {
				padding: 8px 20px;
				margin: 0 10px;
				border-radius: 20px;
				background: #f0f0f0;
				transition: all 0.3s ease;
				
				&.active {
					background: #FFD700;
					color: #fff;
					box-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
				}
			}
		}

		.exercise-info {
			text-align: center;
			margin-bottom: 40px;
			
			.time {
				font-size: 24px;
				font-weight: bold;
				margin-right: 20px;
			}
			
			.count {
				font-size: 20px;
				color: #666;
			}
		}

		.exercise-area {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.animation-wrapper {
				position: relative;
				width: 280px;
				height: 280px;
				
				.outer-ring {
					position: absolute;
					width: 100%;
					height: 100%;
					
					.ring-wave {
						position: absolute;
						border: 2px solid #FFD700;
						border-radius: 50%;
						width: 100%;
						height: 100%;
						opacity: 0;
						
						@for $i from 1 through 3 {
							&:nth-child(#{$i}) {
								animation: ringWave 3s ease-out infinite;
								animation-delay: $i * 0.5s;
							}
						}
					}
				}
				
				.core-animation {
					position: relative;
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					
					.muscle-core {
						width: 200px;
						height: 200px;
						background: linear-gradient(135deg, #FFD700, #FFA500);
						border-radius: 50%;
						transition: all 0.5s ease;
						display: flex;
						justify-content: center;
						align-items: center;
						box-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
						
						&.contract {
							transform: scale(0.85);
							box-shadow: 0 0 50px rgba(255, 215, 0, 0.5);
						}
						
						.inner-circle {
							width: 180px;
							height: 180px;
							background: rgba(255, 255, 255, 0.9);
							border-radius: 50%;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							
							.status-text {
								font-size: 24px;
								font-weight: bold;
								color: #333;
							}
							
							.count-text {
								font-size: 48px;
								font-weight: bold;
								color: #FFD700;
								margin: 10px 0;
							}
							
							.time-text {
								font-size: 16px;
								color: #666;
							}
						}
					}
				}
			}
		}

		.control-bar {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			padding: 20px;
			background: #fff;
			box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
			
			.progress-section {
				margin-bottom: 15px;
				
				.progress-info {
					display: flex;
					justify-content: space-between;
					margin-bottom: 5px;
					
					.progress-label {
						font-size: 14px;
						color: #666;
					}
				}
				
				.progress-bar {
					height: 8px;
					background: #e0e0e0;
					border-radius: 4px;
					overflow: hidden;
					margin-bottom: 5px;
					
					.progress-inner {
						height: 100%;
						background: linear-gradient(90deg, #FFD700, #FFA500);
						border-radius: 4px;
						transition: width 0.3s linear;
					}
				}
				
				.interval-status {
					text-align: center;
					
					text {
						font-size: 14px;
						color: #666;
					}
				}
			}
			
			.current-action {
				text-align: center;
				margin-bottom: 15px;
				
				text {
					display: block;
					color: #666;
					margin: 5px 0;
				}
			}
			
			.controls {
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				.control-btn {
					width: 50px;
					height: 50px;
					border-radius: 25px;
					background: #f0f0f0;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.play-btn {
					width: 70px;
					height: 70px;
					border-radius: 35px;
					background: #FFD700;
					display: flex;
					justify-content: center;
					align-items: center;
				}
				
				.control-icon {
					width: 24px;
					height: 24px;
				}
			}
		}

		.help-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0,0,0,0.5);
			display: flex;
			justify-content: center;
			align-items: center;
			z-index: 999;
			
			.modal-content {
				width: 80%;
				background: #fff;
				border-radius: 10px;
				padding: 20px;
				
				.modal-title {
					font-size: 18px;
					font-weight: bold;
					text-align: center;
					margin-bottom: 20px;
				}
				
				.modal-body {
					text {
						display: block;
						margin: 10px 0;
						line-height: 1.5;
					}
				}
				
				.modal-footer {
					margin-top: 20px;
					text-align: center;
					
					button {
						background: #FFD700;
						border: none;
						padding: 10px 30px;
						border-radius: 20px;
						color: #fff;
					}
				}
			}
		}

		.custom-rules-panel {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.panel-content {
				width: 90%;
				max-width: 320px;
				background: #fff;
				border-radius: 15px;
				padding: 20px;
				
				.panel-title {
					font-size: 18px;
					font-weight: bold;
					text-align: center;
					margin-bottom: 20px;
					color: #333;
				}
				
				.rule-item {
					margin-bottom: 15px;
					
					.rule-label {
						font-size: 14px;
						color: #666;
						margin-bottom: 5px;
						display: block;
					}
					
					.rule-slider {
						
					}
				}
				
				.panel-buttons {
					display: flex;
					justify-content: space-between;
					margin-top: 20px;
					gap: 15px;
					
					button {
						flex: 1;
						height: 40px;
						border-radius: 20px;
						border: none;
						font-size: 14px;
						
						&.btn-reset {
							background: #f5f5f5;
							color: #666;
						}
						
						&.btn-apply {
							background: linear-gradient(135deg, #FFD700, #FFA500);
							color: #fff;
						}
					}
				}
			}
		}

		.rest-modal {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			background: rgba(0, 0, 0, 0.5);
			z-index: 999;
			display: flex;
			justify-content: center;
			align-items: center;
			
			.modal-content {
				width: 80%;
				background: #fff;
				border-radius: 15px;
				padding: 20px;
				text-align: center;
				
				.rest-timer {
					margin: 20px 0;
					
					.rest-time {
						font-size: 48px;
						font-weight: bold;
						color: #FFD700;
					}
					
					.rest-unit {
						font-size: 24px;
						color: #666;
						margin-left: 5px;
					}
				}
				
				.rest-message {
					margin: 20px 0;
					
					text {
						display: block;
						margin: 5px 0;
						color: #666;
						font-size: 14px;
					}
				}
				
				.modal-footer button {
					background: linear-gradient(135deg, #FFD700, #FFA500);
					border: none;
					padding: 10px 30px;
					border-radius: 20px;
					color: #fff;
					font-size: 16px;
				}
			}
		}
	}

	@keyframes ringWave {
		0% {
			transform: scale(0.8);
			opacity: 0.8;
		}
		100% {
			transform: scale(1.5);
			opacity: 0;
		}
	}
</style>